<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频</title>
    <script type="text/javascript">
     function checkVideo(){
        let myVideo = document.createElement('video');
        if( myVideo.canPlayType ) {
            if ( '' != myVideo.canPlayType('video/mp4;codecs="avc1.64001E')) {
                console.log("support H.264");
            }

            if ( '' != myVideo.canPlayType('video/ogg;codecs="vp8')) {
                console.log("support vp8");
            }
            
            if ( '' != myVideo.canPlayType('video/ogg;codecss="theora"')) {
                console.log("support theora");
            }
        } else {
            console.log('not support video check!');
        }
    }

        window.onload = function () {
            checkVideo();
        }
    </script>
</head>
<body>
    <video controls="controls">
        <source src="https://share.wanmen.org/wanmen.mp4" type="video/mp4">
            你的浏览器不支持video标签
    </video>
</body>
</html>